<template>
    <div class="copyEntry">
        <!-- 操作记录 -->
        <el-dialog title="操作记录" :visible.sync="dialogVisible" width="80%" top="5vh" custom-class="import-dialog" :close-on-click-modal="false">
            <div>
                <el-tabs type="card" v-model="editableTabsValue" closable @tab-remove="removeTab">
                    <el-tab-pane name="首页">
                        <span slot="label">
                            <i class="el-icon-tickets"></i>
                            首页
                        </span>
                        <div style="height:100%; margin: 0 auto; border: 1px solid #d7d7d7;min-height:500px">
                            <el-table
                                :row-key="id"
                                :data="clauseRecordList"
                                border
                                resizable
                                tooltip-effect="dark"
                                size="mini"
                                style="width: 100%"
                                stripe
                            >
                                <el-table-column prop="modifyEvent" label="变动事件">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.modifyEvent === '1'">新增条款</span>
                                        <span v-else-if="scope.row.modifyEvent === '2'">修改条款</span>
                                        <span v-else-if="scope.row.modifyEvent === '3'">删除条款</span>
                                        <span v-else-if="scope.row.modifyEvent === '4'">状态变更</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="createDate" label="变动时间">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.modifyEvent === '1'">{{dateFormat(scope.row.createDate)}} {{timeFormat(scope.row.createTime)}}</span>
                                        <span v-else>{{dateFormat(scope.row.modifyDate)}} {{timeFormat(scope.row.modifyTime)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="createUserName" label="操作员">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.modifyEvent === '1'">{{scope.row.createUserName}}</span>
                                        <span v-else>{{scope.row.modifyUser}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="复核状态">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.status === '1'">待复核</span>
                                        <span v-else-if="scope.row.status === '2'">复核通过</span>
                                        <span v-else-if="scope.row.status === '3'">复核拒绝</span>
                                        <span v-else-if="scope.row.status === '4'">废弃</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="checkDate" label="复核时间">
                                    <template slot-scope="scope">
                                        <span>{{dateFormat(scope.row.checkDate)}} {{timeFormat(scope.row.checkTime)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="checkUser" label="复核员"> </el-table-column>
                                <el-table-column label="操作" width="70">
                                    <template slot-scope="scope">
                                        <RiskIconButton
                                            type="primary"
                                            icon="el-icon-view"
                                            topTitle="查看"
                                            v-authCode="B_0191"
                                            @on-click="openDetailsDialog(scope.row, editableTabsValue)"
                                        ></RiskIconButton>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane
                      v-for="(item) in editableTabs"
                      :key="item.name"
                      :label="item.title"
                      :name="item.name"
                    >
                        <span slot="label">
                            <i class="el-icon-tickets"></i>
                            {{item.name}}
                        </span>
                        <div class="entry-list">
                            <ClauseCompare
                                title="条目基本信息"
                                :data="item"
                                :relationLogCode="item.relationLogCode"
                            />
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
// import EntryItemCompare from '@/pages/setting/components/item-setting/item-compare.vue'
import ClauseCompare from '../commom/clause-compare.vue'
import { dateFormat, timeFormat } from '@/utils/tools';
@Component({
    name: 'ClauseRecordDialog',
    components: {
        RiskIconButton,
        ClauseCompare,
    },
})
export default class ClauseRecordDialog extends Vue {
    dateFormat = dateFormat;
    timeFormat = timeFormat;
    @Prop() clauseRecordDialog;
    @Prop() clauseRecordItem;
    private dialogVisible: boolean = false;
    private editableTabsValue = '首页'
    clauseRecordList = [];
    editableTabs = [];
    editDatas: any = {};

    @Watch('clauseRecordDialog')
    watchClauseRecordDialog(val) {
        this.dialogVisible = val;
        if (val == true) {
            this.getChangeRecord();
        } else if (val == false) {
            this.editableTabs = [];
            this.editDatas = {};
            this.editableTabsValue = '首页';
        }
    }
    @Watch('dialogVisible')
    watchDialogVisible(val) {
        if (val == false) {
            this.$emit('emitClauseRecordDialog', false)
        }
    }
    // 获取条款变动记录
    getChangeRecord() {
        this.$axios.post('/indexClause/changeRecord?clauseCode=' + this.clauseRecordItem).then((res: any) => {
            if (res) {
                this.$nextTick(() => {
                    this.clauseRecordList = [];
                    res.forEach(item => this.clauseRecordList.push(item));
                })
            }
        }); 
    }
    // 详情btn
    openDetailsDialog(param1, param2) {
        this.$nextTick(() => {
            const item = this.editableTabs.find((item: any) => item.name === ('历史记录：' + param1.changeNo));
            if (!item) {
                this.$axios.post('/indexClause/changeRecord/detail', {
                    changeNo: param1.changeNo,
                    clauseCode: param1.clauseCode,
                    serialNo: param1.serialNo
                }).then((res: any) => {
                    this.editDatas = res;
                    this.editableTabs.push({
                        title: '历史记录：' + param1.clauseNo,
                        name: '历史记录：' + param1.changeNo,
                        clauseCode: param1.clauseCode,
                        content: this.editDatas,
                        relationLogCode: param1.relationLogCode
                    });
                    this.editableTabsValue = '历史记录：' + param1.changeNo;
                });     
            } else {
                this.editableTabsValue = '历史记录：' + param1.changeNo;
            }    
        })
    }
    // 移除tabs页
    removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        
        this.editableTabsValue = '首页';
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      }
}
</script>
<style lang="scss" scoped>
</style>
